<template>
	<view class="content">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<uni-nav-bar left-icon="back" title="注册账户" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack"></uni-nav-bar>
		<view class="bg_FFFFFF formBox">
			<view class="cu-form-group">
				<view class="title text-white">
					<image src="/static/imgs/register_slices/phone.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<input placeholder="请填写手机号码" name="input" maxlength="11" v-model="phoneno"></input>
				<view @tap="phoneno = ''">
					<image src="/static/images/icon/clear.png" mode="widthFix" v-if="phoneno.length" style="width: 36rpx;"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-white">
					<image src="/static/imgs/register_slices/psd.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<input placeholder="输入验证码" name="input" v-model="code" maxlength="6"></input>
				<view class="list-call">
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
					<u-button class="bg-blue" size="mini" @tap="getCode_v2()">{{tips}}</u-button>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-white">
					<image src="/static/imgs/register_slices/password.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<input placeholder="请输入你的密码" name="input" maxlength="32" v-model="password" :password="!showPassword"></input>
				<view @tap="display">
					<image src="/static/shilu-login/cl.png" mode="widthFix" style="width:45rpx;" v-if="showPassword"></image>
					<image src="/static/images/icon/openpwd.png" mode="widthFix" style="width:45rpx;" v-else></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-white">
					<image src="/static/imgs/register_slices/email.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<input placeholder="请输入邀请码" name="input" maxlength="11" v-model="invitation"></input>
			</view>
		</view>
		<view class="padding-lr">
			<view class="login spacing_bot31 zc" @tap="bindRegister">
				<text>注册</text>
			</view>
			<view class=" tex1 shengm flex" style="justify-content: end;">
				<text style="color: #999999;">注册即接受</text>
				<view style="color: #F24957;"><text @click="toXieyi(1)">《隐私条款》</text><text @click="toXieyi(9)">《版权声明》</text></view>
			</view>
		</view>

	</view>
</template>

<script>
	import md5 from '@/common/md5'
	var tha, js, usercode;
	export default {
		onLoad(option) {
			usercode = option.code;
			if (usercode) {
				this.invitation = usercode;
			}
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				phoneno: '',
				password: '',
				code: '',
				invitation: '',
				appurl: '', //app下载地址
				/* 	xieyi:true, */
				showPassword: false,
				seconds: 60,
				tips: '获取验证码',
			};
		},
		methods: {
			//返回上一页
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 检测是否登录了
			display() {
				this.showPassword = !this.showPassword
			},
			xieyitong() {
				this.xieyi = !this.xieyi;
			},
			codeChange(text) {
				this.tips = text;
			},
			toXieyi: function(id) {
				console.log("/pages/public/arcticle/detail?type=1&id="+id)
				uni.navigateTo({
					url: '/pages/public/arcticle/detail?type=1&id='+id
				})
			},
			getCode_v2() {
				if (this.phoneno == "") {
					uni.showToast({
						icon: 'none',
						title: '请先填写电话号码'
					});
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					this.code = '168168'
					setTimeout(() => {
						uni.hideLoading();
						if (res.msg == "短信发送成功") {
							this.$refs.uCode.start();
						}
								
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getCode() {
				if (this.phoneno == "") {
					uni.showToast({
						icon: 'none',
						title: '请先填写电话号码'
					});
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					this.$Request.post(this.$api.index.sendMsg, {
						tel: this.phoneno
					}).then(res => {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 1000
						});
						if (res.code == 0) {
							setTimeout(() => {
								uni.hideLoading();
								if (res.msg == "短信发送成功") {
									this.$refs.uCode.start();
								}

							}, 2000);

						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

			//注册
			bindRegister() {
				let _this = this
				/* 	if (this.xieyi == false) {
					    uni.showToast({
					        icon: 'none',
					        title: '请先阅读《软件用户协议》'
					    });
					    return;
					} */
				if (this.phoneno.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '手机号不正确'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最少6位数'
					});
					return;
				}
				if (this.code.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确'
					});
					return;
				}
				if (this.invitation == "") {
					uni.showToast({
						icon: 'none',
						title: '邀请码必填'
					});
					return;
				}
				var time = Date.parse(new Date());
				var token = md5(this.phoneno + this.password + time);
				this.$Request.post(this.$api.index.register, {
					phoneno: this.phoneno, //电话
					password: this.password, //密码
					invitation: this.invitation, //邀请码 
					code: this.code,
					token: token,
					time: time
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1000
					});
					if (res.code == 0) {
						this.$SysCache.put("Authorization_token", token);
						this.$SysCache.put("keep_phone", _this.phoneno);
						this.$SysCache.put("keep_phone_flag", 1);

						// 到首页 自动属性
						uni.switchTab({
							url: '/pages/index/index',
							success() {
								var page = getCurrentPages().pop();
								if (page == undefined || page == null) return;
								page.onLoad();
							}
						})
					}
				})
			},
			// 登录去home
			toHome() {
				this.$router.push({
					path: 'pages/index/index'
				})
			},
			toLogin() {
				this.$router.push({
					path: '/pages/public/login/login'
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	//焦点样式
	.formBox{
		padding: 68rpx;
		.active{
			border-bottom: 1px solid #F24957;
		}
	}
	.u-btn--default {
		// background-color: #3A70F6;
		color: #F24957;
		font-size: 32rpx;
	}
	.cu-form-group .title{
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cu-form-group + .cu-form-group{
		border-top: 0;
		margin-top: 10rpx;
	}
	.cu-form-group{
		// margin: 0 70rpx;
		background-color: #FFFFFF;
		padding: 24rpx 0;
		border-bottom: 1px solid #DDDDDD;
	}
	.cu-form-group uni-input{
		color: #333333;
	}
	.ceiling{
		background-color: #EE515A;
	}
	.u-hairline-border:after {
		border: none;
	}
	.Launchpage {
		image {
			width: 258rpx;
			height: 89rpx;
			position: absolute;
			bottom: 73rpx;
			left: 241rpx;
			right: 251rpx;
		}
	}
	.padding-lr{
		padding-left: 70rpx;
		padding-right: 70rpx;
	}
	.content {
		// background-color: #FF5A5F;
		height: 100vh;

		.tozc {
			width: 100%;
			display: flex;
			flex-flow: row-reverse nowrap;
			align-items: center;
			line-height: 30rpx;

		}

		.input11 {
			width: 100%;
			height: 100%;
			border-bottom: 1rpx solid #EFEFEF;

			input {
				height: 100rpx;
				flex: 75%;
				background-color: transparent !important;
				border: none;
				outline: none;
				padding-left: 20rpx;
			}
		}

		.login {
			// width: 100%;
			background: #F24957;
			opacity: 0.8;
			border-radius: 8rpx;
			text-align: center;
			margin-top: 13rpx;
			text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 92rpx;
				color: #FFFFFF;
				opacity: 0.5;

			}
		}

		.zc {
			opacity: 1;

			text {
				opacity: 1;
			}
		}

		.tex1 {
			// overflow: hidden;
			height: 38rpx;
			vertical-align: baseline;
			align-items: center;

			image {
				position: relative;
				top: 10rpx;
			}

			view,
			text {

				// line-height: -1rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}

		.shengm {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			display: flex;
			justify-content: center;
		}

		.bottom_text {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-flow: row nowrap;
			align-items: center;
			position: fixed;
			text-align: center;
			bottom: 76rpx;
			left: 0;
			right: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			view {
				color: #333333;
			}

		}

		// :active
	}
</style>
